<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<div style="margin-bottom: 5px;">

    <!-- 示例-970 -->


</div>



<table class="layui-table" lay-data="{width: 2000, height:330, url: '/demo1mvc/dianServlet' , page:true, id:'idTest'}" lay-filter="demo">
    <thead>
    <tr>
        <th lay-data="{type:'checkbox', fixed: 'left'}"></th>
        <th lay-data="{field:'id', width:150, sort: true, fixed: true}">ID</th>
        <th lay-data="{field:'scenicName', width:150}">订单金额</th>
        <th lay-data="{field:'secnicAddress', width:150}">单号</th>
        <th lay-data="{field:'secnicDescribe', width:150}">支付状态</th>

        <th lay-data="{fixed: 'right', width:500, align:'center', toolbar: '#barDemo'}"></th>
    </tr>
    </thead>
</table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="update">增加</a>
</script>


<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>

<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
    layui.use('table', function(){
        var table = layui.table;
        //监听表格复选框选择
        table.on('checkbox(demo)', function(obj){
            console.log(obj)
        });
        //监听工具条
        table.on('tool(demo)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                layer.msg('ID：'+ data.id + ' 的查看操作');
            } else if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del();
                    $.post('delServlet',{
                        id:data.id
                    },function (result) {
                        if (result.code > 0) {
                            layer.close(index);
                            table.reload('idTest', {
                                url: '/demo1mvc/jingServlet'
                            })
                        }
                        if (result.code == 0) {
                            alert("错误")
                        }
                    });


                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                // layer.alert('编辑行：<br>'+ JSON.stringify(data))
                // $('#username').value(data.username);
                // $('#password').value(data.password);
                layer.open({
                    title: '编辑'
                    ,type: 1
                    ,content: $('#formid'),
                    btn: ['确定', '取消', ] //可以无限个按钮
                    ,yes: function(index, layero){
                        //按钮【按钮一】的回调
                        //按钮【按钮一】的回调

                        $.post("postServlet",{
                            id:data.id,
                            username:$('#username').val(),
                            password:$('#password').val()
                        }, function(result){
                            $("span").html(result);

                        });
                        layer.close(index);  }

                });
            }

            else if(obj.event === 'update'){
                // layer.alert('编辑行：<br>'+ JSON.stringify(data))
                // $('#username').value(data.username);
                // $('#password').value(data.password);
                layer.open({
                    title: '增加'
                    ,type: 1
                    ,content: $('#formid'),
                    btn: ['确定', '取消', ] //可以无限个按钮
                    ,yes: function(index, layero){
                        //按钮【按钮一】的回调
                        //按钮【按钮一】的回调

                        $.post("updateServlet",{
                            id:data.id,
                            username:$('#username').val(),
                            password:$('#password').val()
                        }, function(result){
                            $("span").html(result);

                        });
                        layer.close(index);  }

                });
            }



        });

        var $ = layui.$, active = {
            getCheckData: function(){ //获取选中数据
                var checkStatus = table.checkStatus('idTest')
                    ,data = checkStatus.data;
                layer.alert(JSON.stringify(data));
            }
            ,getCheckLength: function(){ //获取选中数目
                var checkStatus = table.checkStatus('idTest')
                    ,data = checkStatus.data;
                layer.msg('选中了：'+ data.length + ' 个');
            }
            ,isAll: function(){ //验证是否全选
                var checkStatus = table.checkStatus('idTest');
                layer.msg(checkStatus.isAll ? '全选': '未全选')
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>

</body>
<form id="formid" class="layui-form" action="/postServlet" style="display: none">
    <div class="layui-form-item">
        <label class="layui-form-label">username</label>
        <div class="layui-input-block">
            <input type="text" id="username" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">password</label>
        <div class="layui-input-inline">
            <input type="password"id="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux">辅助文字</div>
    </div>
</form>
</html>